<template>
  <div>
    <h1 class="text-3xl font-bold text-neutral-700">数字动画</h1>
    <show-code-box class="mb-[4rem]">
      <template #example>
        <div class="flex items-center p-[1rem]">
          <CountTo
            :start-val="100"
            :end-val="2000"
            color="green"
            :font-size="30"
            :font-weight="600"
            prefix="$"
          />
        </div>
      </template>
      <template #code>
        <pre>
            <code class="language-html text-sm mt-[-20px] mb-[-50px]">
                &lt;CountTo
                    :start-val="100"
                    :end-val="2000"
                    color="green"
                    :font-size="30"
                    :font-weight="600"
                    prefix="$"
                /&gt;
            </code>
        </pre>
      </template>
    </show-code-box>
    <how-to-use-table :how-to-use="howToUse" />
  </div>
</template>

<script setup lang="ts">
  import highlight from 'highlight.js'
  definePageMeta({
    title: '数字动画',
    hideInMenu: false
  })
  useHead({
    title: '数字动画'
  })
  onMounted(() => {
    highlight.highlightAll()
  })

  const howToUse = ref([
    {
      propName: 'start-val',
      mean: '开始的值',
      type: 'number',
      default: '0'
    },
    {
      propName: 'end-val',
      mean: '目标值',
      type: 'number',
      default: '2023'
    },
    {
      propName: 'font-size',
      mean: '字体大小',
      type: 'number',
      default: '16'
    },
    {
      propName: 'font-weight',
      mean: '字体粗细',
      type: 'number',
      default: '400'
    },
    {
      propName: 'color',
      mean: '字体颜色',
      type: 'string',
      default: '#000'
    },
    {
      propName: 'duration',
      mean: '延续时间',
      type: 'number',
      default: '1500'
    },
    {
      propName: 'autoplay',
      mean: '是否自动播放',
      type: 'boolean',
      default: 'true'
    },
    {
      propName: 'prefix',
      mean: '前缀',
      type: 'string',
      default: '-'
    },
    {
      propName: 'suffix',
      mean: '后缀',
      type: 'string',
      default: '-'
    }
  ])
</script>
